<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style type="text/css">
		body,
		html {
			height: 100%;
			margin: 0;
		}
		#wrap {
			position: relative;
			height: 100%;
			overflow: hidden;
		}	
		header {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 60px;
			background: #393a3f;
			font: 20px/60px "宋体";
			text-align: center;
			color: #fff;
		}
		.page {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			transition: .5s;
			background: #000;
		}
		.fileBtn {
			box-sizing: border-box;
			position: absolute;
			left: 50%;
			top: 50%;
			width: 200px;
			height: 50px;
			font: 20px/50px "宋体";
			text-align: center;
			border: 1px solid #179e16;
			border-radius: 5px;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			background: #1aad19;
			color: #fff;

			
		}
		input {
			display: none;
		}
		.pageHide {
			-webkit-transform: translateY(100%);
			transform: translateY(100%);
		}
		.con {
			position: absolute;
			left: 0;
			right: 0;
			top: 60px;
			bottom: 0;
		}
		canvas {
			display: block;
		}
		#img {
			position: absolute;
			left: 50%;
			top: 50%;
			/* margin: -100px 0 0 -100px; */
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			width: 200px;
			height: 200px;
			/* background: url('loading.gif') no-repeat center center; */
		}
		#saveBtn {
			position: absolute;
			right: 5px;
			top: 10px;
			width: 70px;
			font: 14px/30px "宋体";
			text-align: center;
			background: #1aad19;
			text-decoration: none;
			color: #fff;
			border: 1px solid #179e16;
			border-radius: 5px;
		}
		#select {
			position: absolute;
			left: 0;
			top: 0;
			width: 200px;
			height: 200px;
			border: 1px solid #6af7d7;
			background: rgba(106, 247, 215, .1);
		}
		#select span {
			position: absolute;
			box-sizing: border-box;
		}
		#select .top {
			top: -2px;
			left: 0;
			width: 100%;
			height: 20px;
			border-top: 4px solid transparent;
			/*#6af7d7*/
		}
		#select .bottom {
			bottom: -2px;
			left: 0;
			width: 100%;
			height: 20px;
			border-bottom: 4px solid transparent;
			/*#6af7d7*/
		}
		#select .left {
			top: 0;
			left: -2px;
			height: 100%;
			width: 20px;
			border-left: 4px solid transparent;
			/*#6af7d7*/
		}
		#select .right {
			top: 0px;
			right: -2px;
			height: 100%;
			width: 20px;
			border-right: 4px solid transparent;
			/*#6af7d7*/
		}
		#select .left-top {
			top: -2px;
			left: -2px;
			height: 30px;
			width: 30px;
			border-top: 4px solid #6af7d7;
			border-left: 4px solid #6af7d7;
			/*#6af7d7*/
		}
		#select .right-top {
			top: -2px;
			right: -2px;
			height: 30px;
			width: 30px;
			border-top: 4px solid #6af7d7;
			border-right: 4px solid #6af7d7;
			/*#6af7d7*/
		}
		#select .left-bottom {
			bottom: -2px;
			left: -2px;
			height: 30px;
			width: 30px;
			border-bottom: 4px solid #6af7d7;
			border-left: 4px solid #6af7d7;
			/*#6af7d7*/
		}
		#select .right-bottom {
			bottom: -2px;
			right: -2px;
			height: 30px;
			width: 30px;
			border-bottom: 4px solid #6af7d7;
			border-right: 4px solid #6af7d7;
			/*#6af7d7*/
		}
		</style>
	<script type="text/javascript" src="m.touch.js"></script>
</head>
<body>
	<div class="wrap" id="wrap">
		<section class="page">
			<header>
				图片上传裁切
			</header>
			<label class="fileBtn">
				请选择图片上传
				<input type="file" id="file" accept="image/*">
			</label>
		</section>
		<section class="page pageHide">
			<header>
				图片编辑 <a href="javascript:;" class="btn" id="saveBtn">保存</a>
			</header>
			<div class="con">
				<canvas id="c"></canvas>
				<div id="select">
					<!-- <span class="top"></span>
					<span class="right"></span>
					<span class="bottom"></span>
					<span class="left"></span> -->
					<span class="left-top"></span>
					<span class="left-bottom"></span>
					<span class="right-top"></span>
					<span class="right-bottom"></span>
				</div>
			</div>
		</section>
		<section class="page pageHide">
			<header>
				长按保存图片
			</header>
			<canvas id="c2"></canvas>
			<img src="" id="img">
		</section>
	</div>
	<script type="text/javascript">
		(function(){
			var wrap = document.querySelector('.wrap');
			wrap.addEventListener('touchmove',function(e){
				e.preventDefault();
			})
		})();
		(function(){
			var fileEl = document.getElementById('file');
			fileEl.onchange = function(){
				var file = fileEl.files[0];
				var maxSize = 10 * 1024 * 1024;
				if(file.size > maxSize){
					alert('上传的文件太大了');
					return;
				}
				loadImg(file);
			}
		})();

		function loadImg(imgFile){
			var page = document.querySelectorAll('.page')[1];
			var canvas = document.getElementById('c');
			var select = document.getElementById('select');
			var ctx = canvas.getContext('2d');
			var newImg = new Image();
			var reader = new FileReader();
			page.className = 'page';
			canvas.width = canvas.parentNode.clientWidth;
			canvas.height = canvas.parentNode.clientHeight;
			var imgW = 0;
			var imgH = 0;
			var imgL = 0;
			var imgT = 0;
			newImg.onload = function(){

				imgW = this.width;
				imgH = this.height;

				if(imgW > canvas.width || imgH > canvas.height){

					if(imgW > imgH){
						var scale = canvas.width / imgW;
						css(select,'width',scale * imgH);
						css(select,'height',scale * imgH);
					}else {
						var scale = canvas.height / imgH;
						css(select,'width',scale * imgW);
						css(select,'height',scale * imgW);
					}

					imgW*=scale;
					imgH*=scale;

				}
				

				
				imgL = (canvas.width - imgW) / 2;
				imgT = (canvas.height - imgH) / 2;

				css(select,'translateX',(canvas.width - select.offsetWidth) / 2);
				css(select,'translateY',(canvas.height - select.offsetHeight) / 2);

				ctx.drawImage(this,imgL,imgT,imgW,imgH);

				var startL = 0;
				var startT = 0;
				var startW = 0;
				var startH = 0;
				var isResize = false;
				var isDrag = false;
				//拖拽canvas渲染的图片
				drag({
					el:canvas,
					start:function(){
						startL = imgL;
						startT = imgT;
						isDrag = true;
					},
					move:function(e){
						if(isDrag){
							var selectX = css(select,'translateX');
							var selectY = css(select,'translateY');
							imgL = e.pointDis.x + startL;
							imgT = e.pointDis.y + startT;

							if(imgL > selectX){
								imgL = selectX;
							}else if(imgL + imgW < selectX + select.offsetWidth){
								imgL = selectX + select.offsetWidth - imgW;
							}

							if(imgT > selectY){
								imgT = selectY;
							}else if(imgT + imgH < selectY + select.offsetHeight){
								imgT = selectY + select.offsetHeight - imgH;
							}

							ctx.clearRect(0,0,canvas.width,canvas.height);
							ctx.drawImage(newImg,imgL,imgT,imgW,imgH);
						}
					},
					end:function(){
						isDrag = false;
					}
				});


				//多指操作canvas的旋转与缩放
				gesture({
					el:canvas,
					start:function(){
						startL = imgL;
						startT = imgT;
						startW = imgW;
						startH = imgH;
						isDrag = false;
					},
					change:function(e){
						isDrag = false;
						var w = startW * e.scale;
						var h = startH * e.scale;

						if(w < 80 || h < 80){
							return;
						}
						var selectX = css(select,'translateX');
						var selectY = css(select,'translateY');
						var selectW = css(select,'width');
						var selectH = css(select,'height');
						imgW = w;
						imgH = h;
						imgL = startL + (startW - imgW) / 2;
						imgT = startT + (startH - imgH) / 2;

						if(imgL > selectX){
							selectX = imgL;
						}

						if(imgT > selectY){
							selectY = imgT;
						}

						if(selectW > imgW){
							selectW = imgW;
						}

						if(selectH > imgH){
							selectH = imgH;
						}

						ctx.clearRect(0,0,canvas.width,canvas.height);
						ctx.drawImage(newImg,imgL,imgT,imgW,imgH);
						css(select,'translateX',selectX);
						css(select,'translateY',selectY);
						css(select,'width',selectW);
						css(select,'height',selectH);
					},
					end:function(){
						isDrag = false;
					}
				})



				var selParams = {
					x:css(select,'translateX'),
					y:css(select,'translateY'),
					w:css(select,'width'),
					h:css(select,'height')
				};


				drag({
					el:select,
					start:function(){
						selParams = {
							x:css(select,'translateX'),
							y:css(select,'translateY'),
							w:css(select,'width'),
							h:css(select,'height')
						};
					},
					move:function(e){
						if(isResize){
							return;
						}
						var x = e.pointDis.x + selParams.x;
						var y = e.pointDis.y + selParams.y;

						if(x < imgL){
							x = imgL;
						}else if(x > imgL + imgW - select.offsetWidth){
							x = imgL + imgW - select.offsetWidth;
						}


						if(y < imgT){
							y = imgT;
						}else if(y > (imgT + imgH - select.offsetHeight) ){
							y = imgT + imgH - select.offsetHeight;
						}

						if(x < 0){
							x = 0;
						}else if(x > canvas.width - select.offsetWidth){
							x = canvas.width - select.offsetWidth;
						}

						if(y < 0){
							y = 0;
						}else if(y > canvas.height - select.offsetHeight){
							y = canvas.height - select.offsetHeight;
						}

						css(select,'translateX',x);
						css(select,'translateY',y);
					}
				});

				//四周点拖拽 - 左上角
				var leftTop = document.querySelector('.left-top');
				drag({
					el:leftTop,
					start:function(){
						isResize = true;
						selParams = {
							x:css(select,'translateX'),
							y:css(select,'translateY'),
							w:css(select,'width'),
							h:css(select,'height')
						};
					},
					move:function(e){
						var x = selParams.x + e.pointDis.x;
						var y = selParams.y + e.pointDis.y;


						if(x < imgL){
							x = imgL;
						}

						if(x < 0){
							x = 0;
						}

						if(y < imgT){
							y = imgT;
						}
						if(y < 0){
							y = 0;
						}

						var w = selParams.w - (x - selParams.x);
						var h = selParams.h - (y - selParams.y);

						if(w < 80){
							x = x - (80 - w);
							w = 80;
						}

						if(h < 80){
							y = y - (80 - h);
							h = 80;
						}



						css(select,'width',w);
						css(select,'height',h);
						css(select,'translateX',x);
						css(select,'translateY',y);
					},
					end:function(){
						isResize = false;
					}
				});

				//四周点拖拽 - 左下角
				var leftBottom = document.querySelector('.left-bottom');
				drag({
					el:leftBottom,
					start:function(){
						isResize = true;
						selParams = {
							x:css(select,'translateX'),
							y:css(select,'translateY'),
							w:css(select,'width'),
							h:css(select,'height')
						};
					},
					move:function(e){
						var h = selParams.h + e.pointDis.y;
						var x = selParams.x + e.pointDis.x;

						if(x < imgL){
							x = imgL;
						}

						if(x < 0){
							x = 0;
						}
						if(h < 80){
							h = 80;
						}else if(h > imgH - (selParams.y - imgT)){
							h = imgH - (selParams.y - imgT)
						}

						var w = selParams.w - (x - selParams.x);


						if(w < 80){
							x = x - (80 - w);
							w = 80;
						}


						css(select,'width',w);
						css(select,'height',h);
						css(select,'translateX',x);
					},
					end:function(){
						isResize = false;
					}
				});

				//四周点拖拽 - 右上角
				var rightTop = document.querySelector('.right-top');
				drag({
					el:rightTop,
					start:function(){
						isResize = true;
						selParams = {
							x:css(select,'translateX'),
							y:css(select,'translateY'),
							w:css(select,'width'),
							h:css(select,'height')
						};
					},
					move:function(e){
						var w = selParams.w + e.pointDis.x;
						//var h = selParams.h - e.pointDis.y;
						var y = selParams.y + e.pointDis.y;


						if(y < imgT){
							y = imgT;
						}
						if(y < 0){
							y = 0;
						}

						var h = selParams.h - (y - selParams.y);


						if(h < 80){
							y = y - (80 - h);
							h = 80;
						}


						if(w < 80){
							w = 80
						}else if(w > imgW - (selParams.x - imgL)){
							w = imgW - (selParams.x - imgL);
						}

						if(w > canvas.width - selParams.x){
							w = canvas.width - selParams.x;
						}

						css(select,'width',w);
						css(select,'height',h);
						css(select,'translateY',y);
					},
					end:function(){
						isResize = false;
					}
				})


				//四周点拖拽 - 右下角
				var rightBottom = document.querySelector('.right-bottom');
				drag({
					el:rightBottom,
					start:function(){
						isResize = true;
						selParams = {
							x:css(select,'translateX'),
							y:css(select,'translateY'),
							w:css(select,'width'),
							h:css(select,'height')
						};
					},
					move:function(e){
						var w = selParams.w + e.pointDis.x;
						var h = selParams.h + e.pointDis.y;

						if(w < 80){
							w = 80
						}else if(w > imgW - (selParams.x - imgL)){
							w = imgW - (selParams.x - imgL);
						}

						if(w > canvas.width - selParams.x){
							w = canvas.width - selParams.x;
						}

						if(h < 80){
							h = 80;
						}else if(h > imgH - (selParams.y - imgT)){
							h = imgH - (selParams.y - imgT)
						}

						css(select,'width',w);
						css(select,'height',h);
					},
					end:function(){
						isResize = false;
					}
				})

			}

			reader.onload = function(ev){
				var imgUrl = ev.target.result;
				newImg.src = imgUrl;
			}

			reader.readAsDataURL(imgFile);
		}


		(function(){
			var saveBtn = document.getElementById('saveBtn');
			var select = document.getElementById('select');
			var img = document.getElementById('img');
			var c = document.getElementById('c');
			var c2 = document.getElementById('c2');
			var ctx = c.getContext('2d');
			var ctx2 = c2.getContext('2d');
			var page = document.querySelectorAll('.page')[2];

			tap(saveBtn,function(){
				var x = css(select,'translateX');
				var y = css(select,'translateY');
				var w = css(select,'width');
				var h = css(select,'height');
				var imgData = ctx.getImageData(x,y,w,h);
				c2.width = w;
				c2.height = h;

				ctx2.putImageData(imgData,0,0);
				img.src = c2.toDataURL('image/png');
				page.className = 'page';
				c2.style.display = 'none';

			});

		})();


	</script>
</body>
</html>
